<template>
  <component :is="heroIcons[name]" v-if="isLoaded" :class="pclass" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as heroIcons from '@heroicons/vue/24/outline'

const isLoaded = ref(false)

defineProps({
  name: {
    type: String,
    required: true,
  },
  pclass: {
    type: String,
    default: 'h-5 w-5'
  },
})

onMounted(() => {
  isLoaded.value = true
})
</script>
